<template>
    <div>
        <el-table :data="tableData" style="width: 100% ;">
            <el-table-column prop="name" label="角色名称" width="250px">
            </el-table-column>
            <el-table-column prop="description" label="角色描述" width="180px">
            </el-table-column>
            <el-table-column label="权限" width="600">
                <template slot-scope="scope">
                    <el-button type="text" @click="setPer(scope.row)">权限设置</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="150">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" circle></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :page-size="config.pageSize" :pager-count="5" layout="prev, pager, next"
            :current-page="config.page" @current-change="changePage" :total="config.total">
        </el-pagination>

        <el-dialog title="权限菜单" :visible.sync="vis" width="40%" :close-on-click-modal="false">
            <el-form :model="entity" style="width: 80%; margin: 0 auto; line-height: 40px">
                <el-checkbox-group v-model="entity.permission_id">
                    <el-checkbox v-for="(item, index) in options" :label="item.id"
                        :key="index" name="type" class="favour_checkbox">{{ item.name }}</el-checkbox>
                </el-checkbox-group>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visfis">取 消</el-button>
                <el-button type="primary" @click="saveRole">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
export default {
    name: 'PremissionsTable',
    props: {
        config: Object,
        tableData: Array,
        vis: Boolean,
        entity: Object,
        options: Array,
    },
    data() {
        return {
            aa: {
                description: "首页",
                icon: "s-shop",
                id: "1",
                name: "首页",
                path: "/home"
            }
        }
    },
    methods: {
        handleEdit(row) {
            this.$emit('edit', row)
        },
        handleDelete(row) {
            this.$emit('del', row)
        },
        changePage(page) {
            this.config.page = page
            this.$emit('changePage', page)
        },
        visfis() {
            this.$emit('visfis')
        },
        setPer(row) {
            this.$emit('roleSave', row)
        },
        saveRole() {
            this.$emit('updateRole', this.entity)
        },
    }
}
</script>